*{
    padding:0;
    margin:0;
    list-style:none;
}
html,body,.wrapper,.slider-list,.slider{
    width:100%;
    height:100%;
    color:#fff;
}
.slider{
    padding:200px;
    box-sizing:border-box;
}
.slider-list .slider:nth-child(1){
    background:url(./images/bg-1.jpg);
    background-repeat:no-repeat;
    background-size:cover;
}
.slider-list .slider:nth-child(2){
    background:url(./images/bg-2.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    display:none;
}
.slider-list .slider:nth-child(3){
    background:url(./images/bg-3.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    display:none;    
}
.slider-list .slider:nth-child(2) img,.slider-list .slider:nth-child(3) img{
    width:0%;
}
.slider .title{
    float:left;
    width:40%;
}
.slider .image img{
    float:right;
    width:40%;
}
.slider-btn{
    height:40px;
    width:100%;
    position: absolute;
    top:50%;
    margin-top:-20px;
}
.slider-btn span{
    display: inline-block;
    width:30px;
    height:40px;
}
.slider-btn .left-btn{
    float:left; 
    margin-left:100px;
    background:url('./images/left-btn.png');
}
.slider-btn .right-btn{
    float:right;
    margin-right:100px;
    background:url('./images/right-btn.png');
}
.slider-order{
    position:absolute;
    bottom:100px;
    text-align:center;
    width:100%;
    height:30px;
}
.slider-order ul li{
    display: inline-block;
    width:30px;
    height:30px;
    border-radius: 50%;
    background-color:#fff;
    margin-right:20px;
}
.slider-order .active{
    background-color:red;
}